Paths in Flutter: A Visual Guide
Flutter gives us a lot of standard views to use in our projects, but from time to time we need to create custom views. One of the most common way to do this is, using paths.
In this blog post, we will go through each function which in Path class and see how they behave.
But first, let’s quickly go over our base playground.
p.s. I wanted to pick Totoro as a the header because of my latest trip to Japan and also it is cute :) Also there is a path in the gif :)
Basically what we have here is a StatelessWidget with CustomPaint as a child and it gets our CustomPainter as a painter. CustomPaint is a widget that provides us a canvas to be used by the CustomPainter to paint what we provided in the paint method.
For painting options, we created a Paint object and decided to draw everything stroke style with a width of 8 in color red.
Next, we have our Path in our code to be used for drawing. Path is basically a collection of drawn elements. These elements are drawn according to its starting point. The initial starting point for a Path is (0,0).
Lastly, we have our canvas . We use canvas for drawing our path on it with the paint that we created.
Now that we are done with the playground, let’s talk about the screen coordinate system in case it is not familiar to some people.
For the screen, the start point (0,0) is the screen’s top left corner. X coordinate direction is the horizontal axis and the right edge of the screen is the positive visible limit and its value is the width of the screen. Y coordinate direction is the vertical axis and bottom edge of the screen is the positive visible limit and its value is the height of the screen.
Now we are ready to start.
moveTo
moveTo method helps us to move the starting point of the sub-path to the point provided within the method.
lineTo
lineTo is the method to draw a line from the current point of the path to the point provided within the method.
quadraticBezierTo
quadraticBezierTo method was for me the most complicated one to understand. It draws a Bezier Curves and as we learn from Mathematics, it does this with the control point provided.
Disclaimer: Since it’s a complicated concept, I wanted to keep this as visual as possible, you can see how bezier curves are calculated.
From the left center of the screen, we draw a bezier curve to the right center of the screen.
cubicTo
cubicTo method adds a Bezier curve in cubic style.
Unlike to quadraticBezierTo, we assign two different control points for . This way you can have the bezier calculations for two control points to have cool views like a wave.
conicTo
conicTo is also basically acting like a quadraticBeizerTo wit the only difference being the weight variable. If the weight is bigger than 1, the drawn shape is a hyperbola. If the weight is 1 then drawn shape is parabola and if it’s smaller than 1, the drawn shape would be an ellipse.
One important thing to note is, as the weight increases, the curve is pulled more to control point.
arcTo
arcTo is accepting an oval then, gets a start angle and sweep angle as a radian. It starts drawing the oval from the start angle and adds the sweep angle to the start angle.
e.g. For drawing an arc starting from left middle edge to top edge of an oval, we will start from 0 which is the radian value for 0 and add 1.57 which is the radian value for 90.
The example below shows the arc of an oval drawn from the center of the screen.
addRect
addRect adds a rectangle as a new sub-path.
addOval
addOval adds an oval as a sub-path. From the example above, we will only change the method call.
addArc
addArc is acting as arcTo.
e.g. For drawing an arc starting from left middle edge to top edge of an oval, we will start from 3.14 which is the radian value for 180 and add 1.57 which is the radian value for 90.
For making things easier, I added a function to calculate the radian from degree.
addPolygon
addPolygon method draws polygon from sets of points. It gets a set of Offset values which will be the positions for the polygon. Lastly it accepts a boolean, true acts like path.close() and draws a straight line between the last and first point and false does nothing.
addRRect
addRRect is a method to create a rounded cornered rectangle. We will use the rectangle above and corners with radius of 16.
addPath
addPath is the method to add one path to another one with an offset. We will add one path with line to the rounded corner rectangle above.
relativeLineTo
relativeLineTo is basically behaving like lineTo but only offsets the drawn shape to the current point. Width the same code lineTo would have the half of the length.
relativeQuadraticBezierTo
relativeQuadraticBezierTo method acts like quadraticBezierTo method. Current point is calculated relative to the current position of the path.
relativeConicTo
relativeConicTo behaves exactly like conicto method. It calculates the current point relative to the path’s current position.
relativeCubicTo
relativeCubicTo method behaves exactly like cubicTo. Only difference is, it’s current position will be calculated relative to the current position of the path.
Conclusion
Drawing custom shapes with canvas are really important and it’s helpful for us to use our creativity in our application development. These operations can be used to create a cool background, graphics and so on.
So, go ahead and play around with it, if you have any questions either leave a comment below or send me a DM over Twitter (you can find the link below).
Thank you!
